<script>
import {defineComponent} from 'vue'
import {handleError, handleSuccess} from "@/util/request";

export default defineComponent({
      name: "ApiAccessLogPage",
      data() {
        return {
          // ********************需要后端返回给前端***************************
          // 表格绑定的数据 (后端查询返回的page对象中的records, 后端select *查出来的数据)
          tableData: [],
          // 查询到的总行数 (后端查询返回的page对象中的total, 后端select count(*)查出来的值)
          total: 0,
          // 查询到的总页数 (后端根据total和size算出来一个值)
          pages: 0,
          // ********************前端发给后端的***************************
          // 查询参数: 接口名称 (绑定输入框, 让用户输入, 发给后端)
          apiName: null,
          // 查询参数: 客户端IP (绑定输入框, 让用户输入, 发给后端)
          clientIp: null,
          // 查询参数: 用户名 (绑定输入框, 让用户输入, 发给后端)
          username: null,
          // 分页参数: 当前页码 (默认为1, 绑定分页器, 让用户选择, 发给后端)
          current: 1,
          // 分页参数: 显示的行数 (默认为10, 绑定分页器, 让用户选择, 发给后端)
          size: 10,
          // ********************前端自己的变量,与http请求无关***************************
          // 行数值的数组 (绑定给分页器的下拉框)
          sizes: [5, 10, 20, 50, 100],
          dialogVisible: false,
          // 绑定出入库表单记录对象
          record: {},
        }
      },

      methods:{
        getPageData () {
          let page = {
            current: this.current,
            size: this.size,
            apiName: this.apiName,
            clientIp: this.clientIp,
            username: this.username
          }
          this.$http.get('/api/page', {params:page})
              .then((result)=> {
                const page = handleSuccess(result)
                if (page) {
                  this.tableData = page.records
                  this.total = page.total
                  this.pages = page.pages
                }
              })
              .catch((error)=> {
                handleError(error)
              })
        },
        handleSizeChange(size) {
          this.size = size
          this.getPageData()
        },
        handleCurrentChange(current) {
          this.current = current
          this.getPageData()
        },
        handleSearch() {
          this.current = 1
          this.size = 10;
          this.getPageData()
        },
        reset() {
          this.apiName = null
          this.clientIp = null
          this.username = null
          this.current = 1
          this.size = 10
          this.getPageData()
        },

      },
  mounted() {
    this.getPageData()
  }
    }
)
</script>

<template>
<div>
  <!-- el-card是卡片的父容器 -->
  <el-card class="box-card">
    <!-- 卡片标题 -->
    <div slot="header" class="clearfix">
      <span>api日志列表</span>
    </div>
    <!-- 卡片内容区域1: 放一组横排的form表单, 给用户输入查询条件 -->
    <el-form class="el-form--inline" label-position="left">
      <el-form-item label="接口名">
        <el-input placeholder="(支持模糊查询)" v-model="apiName"/>
      </el-form-item>
      <el-form-item label="客户端IP">
        <el-input  v-model="clientIp"/>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input  v-model="username"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 卡片内容区域2: 这里放表格, 展示本次数据 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="apiName" label="接口名" width="180"/>
      <el-table-column prop="clientIp" label="客户端IP" width="160"/>
      <el-table-column prop="accessTime" label="请求时间" width="160"/>
      <el-table-column prop="accessDuration" label="总耗时(ms)" width="120"/>
      <el-table-column prop="username" label="用户名" width="100"/>
      <el-table-column prop="role" label="用户角色" width="100"/>
      <el-table-column prop="isException"  label="是否发生异常" width="120">
        <template v-slot="scope">
          <el-tag v-if="scope.row.isException==0" type="success">无异常</el-tag>
          <el-tag v-if="scope.row.isException==1" type="danger">有异常</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="exceptionMessage" label="异常消息" width="120"/>
    </el-table>
    <!-- 卡片底部: 这里分页器 -->
    <el-row class="card-footer" style="margin-top: 10px">
      <el-col>
        <el-pagination
            layout="sizes,prev,pager,next,jumper,total"
            :total="total"
            background
            :current-page="current"
            :page-size="size"
            :page-sizes="sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>
  </el-card>
</div>
</template>

<style scoped>

</style>